<template>
    <div>
 <!-- 加入购物车 -->
      <div id="addCart">
        <span><i class="icon iconfont icon-atm"> </i></span>
        <span><i class="icon iconfont icon-cart" @click="goCart"> </i></span>
        <span><i class="icon iconfont icon-calendar"> </i></span>
        <button @click="buy">立即购买</button>
        <button @click="appCart">加入购物车</button>
      </div>
        <!-- x选择 -->
        <div id="choice" v-show="flag" v-if="true">
            <div id="choice-top" v-if="detailsObj.basicInfo">
                <div class="tu">
                    <img :src="detailsObj.basicInfo.pic" alt="">
                </div>
                <div class="title">
                    <p class="namess">{{detailsObj.basicInfo.name}}</p>
                    <p class="red">￥{{detailsObj.basicInfo.pingtuanPrice}}</p>
                </div>
            </div>
            <div id="choice-content"  v-if="detailsObj.properties">
                <p>{{detailsObj.properties[0].name}}</p>
                <span class="circulation" 
                @click="size(item)" 
                 v-for="(item,i) in detailsObj.properties[0].childsCurGoods" :key="i">
                    {{item.name}}
                </span>
            </div>
             <div id="choice-bun">
                 <div>购买数量</div>
                 <div>
                     <button @click="subtract">-</button>
                     <input type="text" :value="num">
                     <button @click="add">+</button>
                 </div>
            </div>
            <div id="choice-mai" @click='addCart'>
                添加购物车
            </div>
        </div>

        <div class="selective" v-show="selective">
            请选择尺寸!
        </div>
        <div class="selective" v-show="addCartOK">
            添加成功!
        </div>
    </div>
</template>

<script>
import {getGoodsDetail} from '../../../utils/api/Home'
export default {
    props:['detailsObj'],
    data() {
        return {
            flag:false,
            num:1,
            cart:{},
            name:'',
            selective:false,
            addCartOK:false,
        };
    },
    created() {
    },
   
    methods: {
        // 选择尺码
        size(item) {
            this.$store.commit('changeSize',item.name)
            this.name = item.name
            this.$store.commit('changeBasicInfo',this.detailsObj.basicInfo)
            console.log(this.$store.state.cartList.basicInfo);
            
            
        },
        // 数量++
        add() {
            this.num++
                // 把数据存到vuex中
            this.$store.commit('changeNum',this.num)
        },
        // 数量--
        subtract() {
            if(this.num>1){
                this.num--
                // 把数据存到vuex中
                this.$store.commit('changeNum',this.num)
            }
        },
        // 添加购物车
        addCart() {
            if(this.name){
                this.$store.commit('addList',this.$store.state.cartList)
                // 弹出尺寸消失
                this.flag = false

                // 显示添加成功,并在1秒后消失
                var b = this.addCartOK = true
                 setTimeout(() => {
                this.addCartOK = false
                }, 1000);

                clearInterval(b)

            }else { 
                // 显示请选择尺寸,并在1秒后消失
                this.selective = true

                var a= setTimeout(() => {
                this.selective = false
                }, 1000);

            }
        },
        // 加入购物车
        appCart() {
            console.log(55);
            if(localStorage.getItem('user')){
            this.flag = true

            } else {
                console.log(4);
                
            }
            
           
        },
        // 立即购买
        buy() {

        },
        // 去购物车页面
        goCart() {
            this.$router.push('/Cart/index')
        }
        
        

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>

#addCart {
  width: 100%;
  height: 1rem;
  background-color: #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  font-size: 0.4rem;
  align-items: center;
  button {
    height: 100%;
    width: 2rem;
  }
}
#choice{
    width: 100%;
    background-color: #aaa;
    position: absolute;
    bottom: 0;
    font-size: .3rem;
    left: 0;
    #choice-top{
        width: 100%;
        height: 1.6rem;
        border-bottom: 1px solid #ccc;
        display: flex;
        .tu{
            width: 1.2rem;
            height: 1.2rem;
            margin: .2rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .title{
            width: 5rem;
            height: 100%;
            .namess{
                margin: .4rem .3rem;
            }   
            .red{
                color: red;
                margin-left: .3rem;
            }
        }
    }
     #choice-content{
        width: 100%;
        overflow: hidden;
        p{
            margin: .1rem .2rem;
        }
        .circulation{
            width: 2rem;
            font-size: .24rem;
            height: .6rem;
            padding: .1rem;
            margin: .2rem;
            display: block;
            float: left;
            border: 1px solid #ccc;
            .blue{
                // border: red 1px solid;
                color: red;
                background-color: blue;
            }
        }
    }
    #choice-bun{
        width: 100%;
        height: 1.2rem;
        display: flex;
        justify-content: space-between;
        padding:0 .3rem ;
        align-items: center;
        input{
            text-align: center;
            width: .5rem;
        }
    }
    #choice-mai{
        width: 100%;
        height: 1rem;
        background-color: red;
        color: #fff;
        text-align: center;
        line-height: 1rem;
        font-size: .34rem;

    }
}
.selective{
    width: 150px;
    height: 150px;
    background-color: #ccc;
    position: absolute;
    top: 100px;
    left: 100px;
    line-height: 150px;
    text-align: center;
    font-size: .5rem;
}
</style>
